<%-- 
    Document   : application_form
    Created on : Jan 31, 2013, 12:38:58 AM
    Author     : owtee
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<link href="../css/smoothness/jquery-ui-1.10.0.custom.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../js/jquery-ui-1.10.0.custom.js"></script>  
<script type="text/javascript" src="../js/application.js"></script>

        <script language="JavaScript">
            var SealoffSource = true; /* to disable the right mouse button, so the source can not been seen. */
                function click() {
                    if (event.button==2) {
                        alert('ห้ามคลิกขวา..')
                    }
                }
            document.onmousedown=click;
        </script>
        <script language="JavaScript">
        document.onkeydown = function() {    
            switch (event.keyCode) { 
                case 116 : //F5 button
                    event.returnValue = false;
                    event.keyCode = 0;
                    return false; 
                case 82 : //R button
                    if (event.ctrlKey) { 
                        event.returnValue = false; 
                        event.keyCode = 0;  
                        return false; 
                    } 
            }
        }
        </script>
        
        
<table align="center" border="0" style="width: 700px;">
    <c:forEach items="${mesLst}" var="message">
        <tr>
            <td colspan="6">${message.getMesDetail()}</td>
        </tr>
    </c:forEach>
    <tr>
        <td colspan="4">ใบรับส่งเอกสาร</td>                            
        <td style="text-align: right;">เลขที่งาน -:</td>
        <td style="text-align: left;">${job.getJobId()}</td>
    </tr>
    <tr>
        <td colspan="6">ข้อมูลผู้แจ้งงาน<hr></td>
    </tr>
    <tr>
        <td style="text-align: right;">ชื่อผู้สั่งงาน -:</td>
        <td style="text-align: left;">${job.getRequestUser().getEmpFirstName()}&nbsp;&nbsp;${job.getRequestUser().getEmpLastName()}</td>
        <td style="text-align: right;">หน่วยงาน -:</td>
        <td style="text-align: left;">${job.getRequestUser().getDivId().getDivName()}</td>
        <td style="text-align: right">โทรศัพท์ -:</td>
        <td style="text-align: left;">${job.getRequestUser().getTelephone()}</td>
    </tr> 
    <tr>
        <td style="text-align: right;">วันที่สั่งงาน -:</td>
        <td style="text-align: left;">${job.getRequestDateFormat()}</td>
        <td style="text-align: right;">วันที่ รับ/ส่ง -:</td>
        <td style="text-align: left;">
            <input class="inputbox" type="text" id="txtExpectDate" name="txtExpectDate" value="${job.getExpectDateFormat()}" style="width: 100px;" />
        </td>
        <td style="text-align: right;">ช่วงเวลา -:</td>
        <td style="text-align: left;">
            <select id="ddlPeriod" name="ddlPeriod">
                <option value="">--- กรุณาเลือก ---</option>
                <c:forEach items="${jobPeriodLst}" var="jobPeriod">
                    <option value="${jobPeriod.getPeriodId()}" <c:if test="${jobPeriod.getPeriodId() == job.getPeriodId().getPeriodId()}">selected</c:if>>
                        ${jobPeriod.getPeriodName()}
                    </option>
                </c:forEach>
            </select>
        </td>
    </tr>
    <tr>
        <td colspan="6">รายละเอียดงาน<hr></td>
    </tr>
    <tr style="background-color: greenyellow;">
        <td style="text-align: right;">ประเภท -:</td>
        <td style="text-align: left;">
            <select id="ddlAction" name="ddlAction">
                <option value="">--- กรุณาเลือก ---</option>
                <c:forEach items="${jobActionLst}" var="jobAction">
                    <option value="${jobAction.getActionId()}">${jobAction.getActionName()}</option>
                </c:forEach>
            </select>
        </td>
        <td style="text-align: right;">งาน -:</td>
        <td style="text-align: left;">
            <select id="ddlItem" name="ddlItem">
                <option value="">--- กรุณาเลือก ---</option>
                <c:forEach items="${jobItemLst}" var="jobItem">
                    <option value="${jobItem.getItemId()}">${jobItem.getItemName()}</option>
                </c:forEach>
            </select>
        </td>
        <td colspan="2" rowspan="2" style="text-align: center;">
            <input type="button" id="btnAddJobDetail" name="btnAddJobDetail" value="เพิ่ม" onclick="addJob()"/>
            <input type="button" id="btnEdtiJobDetail" name="btnEdtiJobDetail" value="แก้ไข" onclick="editJob()" disabled/>
            <input type="button" id="btnCancelJobDetail" name="btnCancelJobDetail" value="ยกเลิก" onclick="cancelEdit()" disabled/>
        </td>
    </tr>
    <tr style="background-color: greenyellow;">
        <td style="text-align: right;">รายละเอียด -:</td>
        <td colspan="3" style="text-align: left;">
            <textarea class="inputbox_warn" id="txtDescription" name="txtDescription" rows="2" cols="40"></textarea>
        </td>                                                      
    </tr> 
    <tr>
        <td colspan="6">
            <table id="tblJob" name="tblJob" border="1" width="100%" style="background-color: greenyellow;" align="center">
                <thead>
                    <td style="width: 10%; text-align: center;">ประเภท</td>
                    <td style="width: 25%; text-align: center;">งาน</td>
                    <td style="width: 45%; text-align: center;">รายละเอียด</td>
                    <td style="width: 10%; text-align: center;">แก้ไข</td>
                    <td style="width: 10%; text-align: center;">ลบ</td>
                </thead>
                <c:forEach items="${job.getJobDetailsCollection()}" var="jobDetail" varStatus="status">
                    <tbody>
                        <td style="text-align: center;">${jobDetail.getActionId().getActionName()}</td>
                        <td>${jobDetail.getItemId().getItemName()}</td>
                        <td>${jobDetail.getDescription()}</td>
                        <td style="text-align: center;" onclick="editJobDetail('${jobDetail.getDetailId()}', '${jobDetail.getActionId().getActionId()}', '${jobDetail.getItemId().getItemId()}', '${jobDetail.getDescription()}')">
                            <img src="../images/edit.png">
                        </td>
                        <td style="text-align: center;" onclick="deleteJob('${jobDetail.getDetailId()}', '${jobDetail.getItemId().getItemName()}')">
                            <img src="../images/delete.png">
                        </td>
                    </tbody>
                </c:forEach>
            </table>
        </td>
    </tr>
    <tr><td colspan="6">&nbsp;</td></tr>
    <tr>
        <td style="text-align: right;">หมายเหตุ -:</td>
        <td colspan="5" style="text-align: left;">
            <textarea class="inputbox_warn" id="txtRemark" name="txtRemark" rows="2" cols="60">${job.getRemark()}</textarea>
        </td>
    </tr>
    <tr>
        <td colspan="6">บุคคลที่ติดต่อ<hr></td>
    </tr>                        
    <tr>                            
        <td style="text-align: right;">บริษัท -:</td>
        <td style="text-align: left;">
            <select id="ddlConCom" name="ddlConCom" onchange="reqContact()" style="width: 100%;">
                <option value="">--- กรุณาเลือก ---</option>
                <c:forEach items="${conComLst}" var="conCom">
                    <option value="${conCom.getConComId()}" <c:if test="${conCom.getConComId() == job.getConId().getConComId().getConComId()}">selected</c:if>>
                        ${conCom.getConComName()}
                    </option>
                </c:forEach>
            </select>
        </td>
        <td style="text-align: right;">ชื่อผู้ติดต่อ -:</td>
        <td style="text-align: left;">
            <select id="ddlCon" name="ddlCon" onchange="reqContactDetail()" style="width: 100%;">
                <option value="">--- กรุณาเลือก ---</option>   
                <c:if test="${not empty conLst}">
                    <c:forEach items="${conLst}" var="con">
                        <option value="${con.getConId()}" <c:if test="${con.getConId() == job.getConId().getConId()}">selected</c:if>>
                            ${con.getConName()}
                        </option>
                    </c:forEach>
                </c:if>
            </select>
        </td>
        <td style="text-align: right;">โทรศัพท์ -:</td>
        <td style="text-align: left;">
            <input type="text" id="txtConTel" name="txtConTel" value="${job.getConId().getConTel()}" style="width: 100px;" disabled />
        </td>                            
    </tr>                        
    <tr>
        <td style="text-align: right;">ที่อยู่ -:</td>
        <td colspan="5">
            <textarea id="txtComAddress" name="txtComAddress" rows="3" cols="60" readonly>${job.getConId().getConComId().getConComAddress()}</textarea>
        </td>                            
    </tr>
    <c:if test="${not empty job.getMsgRemark()}">
        <tr>
            <td colspan="6">Messenger<hr></td>
        </tr>
        <tr>
            <td style="text-align: right;">ข้อความ -:</td>
            <td colspan="5">
                <textarea id="txtComAddress" name="txtComAddress" rows="3" cols="60" readonly>${job.getMsgRemark()}</textarea>
            </td>                            
        </tr>
    </c:if>
    <tr>
        <td colspan="6" style="text-align: center;">
            <input type="submit" value="Save"/>            
            <input type="button" value="Back" onclick="window.history.back()">
        </td>
    </tr>
    <tr>
        <td style="width: 12%">&nbsp;</td>
        <td style="width: 24%">&nbsp;</td>
        <td style="width: 12%">&nbsp;</td>
        <td style="width: 24%">&nbsp;</td>
        <td style="width: 12%">&nbsp;</td>
        <td style="width: 16%">&nbsp;</td>
    </tr>
</table>
<input type="hidden" id="hdJobId" name="hdJobId" value="${job.getJobId()}"/>
<input type="hidden" id="hdJobDetailId" name="hdJobDetailId"/>
                    